<script setup>
	import { useGlobalStore, useAuthStore } from '@/stores';
	const { isOlderUI } = useGlobalStore();
	import { showDialog } from 'vant';

	import { get, post } from '@/api/http/index';
	import useBuriedPoint from '@/hooks/useBuriedPoint';
	import { useRouter } from 'vue-router';
	const router = useRouter();
	import { handleLogin } from '@/utils/singleLogin';

	import { storeToRefs } from 'pinia';

	const store = useAuthStore();

	const { userInfo } = storeToRefs(store);

	useBuriedPoint();

	const images = [
		'https://szsb.hzxh.gov.cn:8080/backgroud/2022-07-28/46d1149a-1097-4658-aa48-7410258afb6f.png',
		'https://szsb.hzxh.gov.cn:8080/backgroud/2023-02-01/3631727a-8754-4528-9a90-5d9eaa6feb80.jpeg',
		'https://szsb.hzxh.gov.cn:8080/backgroud/2022-12-06/b6b579c5-54bb-414f-9282-e560b703ddf4.jpg',
	];

	const menu = ['线上科普', '个人预约', '我的订单'];

	const hanldeClick = (name) => {
		const { userInfo } = useAuthStore();
		if (userInfo.contactName || name == '线上科普') return router.push({ name });
		showDialog({
			title: '提示',
			message: '暂无权限，请先登录！',
		}).then(() => {
			// on close
		});
	};

	const linkPhone = '0571-88872909';
	const callPhone = () => {
		if (!window.ZWJSBridge) return;
		ZWJSBridge.phoneCall({
			corpId: linkPhone,
		});
	};
</script>

<template>
	<section class="h-full bg-green">
		<!-- 顶部留白 -->
		<!-- <div class="w-full h-30px"></div> -->

		<!-- 轮播 -->
		<van-swipe
			class="w-full !h-200px"
			:autoplay="5000"
			lazy-render
		>
			<van-swipe-item
				v-for="image in images"
				:key="image"
			>
				<img
					class="full"
					:src="image"
				/>
			</van-swipe-item>
		</van-swipe>

		<div class="mt-1rem px-15px flex-center">
			<span v-if="userInfo.contactName">欢迎使用，{{ userInfo.contactName }}</span>
			<van-button
				v-else
				@click="handleLogin"
				type="primary"
				size="large"
				>立即登录</van-button
			>

			<!-- <span
				
				@click="handleLogin"
				class="text-(center 1.2rem gray-7) p-10px px-12px rounded-7px bg-#67bdde"
				>立即登录</span
			> -->
		</div>
		<div
			v-if="isOlderUI"
			class="p-30px"
		>
			<nav
				@click="hanldeClick(item)"
				class="bg-#67bdde p-20px flex-around-center rounded-20px mt-30px"
				v-for="(item, i) in menu"
				:key="'nav' + i"
			>
				<img
					class="w-60px"
					:src="require(`@/assets/icons/home_nav_icon_${i + 1}.png`)"
					alt=""
				/>
				<span class="text-white text-36px">{{ item }}</span>
			</nav>
		</div>

		<div
			v-else
			class="block mt-30px"
		>
			<p>线上科普</p>
			<div class="content">
				<nav
					@click="hanldeClick('线上科普')"
					class="w-100% relative"
				>
					<img
						class="w-full rounded-10px"
						src="@/assets/images/bg-nav.png"
						alt=""
					/>
					<p class="absolute-y-center right-10px">立即查看</p>
				</nav>
			</div>

			<p>参观预约</p>

			<div class="content">
				<nav
					@click="hanldeClick('个人预约')"
					class="w-100% relative"
				>
					<img
						class="w-full rounded-10px"
						src="@/assets/images/bg-yuyue.png"
						alt=""
					/>
					<p class="absolute-y-center right-10px">立即预约</p>
				</nav>
			</div>

			<p>我的订单</p>

			<div class="content">
				<nav
					@click="hanldeClick('我的订单')"
					class="w-100% relative"
				>
					<img
						class="w-full rounded-10px"
						src="@/assets/images/bg-lishi.png"
						alt=""
					/>
					<p class="absolute-y-center right-10px">点击查看</p>
				</nav>
			</div>
		</div>

		<!-- absolute -->
		<footer
			class="bg-green mt-20px flex-col-center w-100% text-#808DA1 bottom-10px text-12px leading-18px"
		>
			<p>本服务由浙江政务服务网、</p>
			<p>中国湿地博物馆(杭州西溪研究院)</p>
			<p>
				服务咨询热线：<span
					class="text-#1492ff pointer"
					@click="callPhone"
					>{{ linkPhone }}</span
				>
			</p>
		</footer>
	</section>
</template>

<style lang="less" scoped>
	.bg-green {
		background-color: rgba(201, 227, 208);
	}
	.block {
		padding: 0 10px;
		// background: url('@/assets/images/home-bg.png');
		> p {
			margin-top: 20px;
			font-size: 1rem;
			line-height: 2rem;
			font-weight: bold;
		}
		> .content {
			background-color: #fff;
			border-radius: 10px;
			padding: 5px 15px;
			display: flex;
			justify-content: space-between;
			box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);

			nav {
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-radius: 10px;
				// background: linear-gradient(to right, #34c3e1, #4c89be);

				p {
					font-size: 12px;
					height: 20px;
					display: flex;
					align-items: center;
					padding: 5px 8px;
					background-color: #fff;
					border-radius: 10px;
				}
			}
		}
	}
</style>
